<template>
	<view class="pagebox">
		<view class="pond-head" @tap="init">
			<image :src="require('./image/pond-head.png')" alt="">
		</view>
		<view class="container-out">
			<view class="container-in">

				<view class="content-out" v-for="(box,index) in list" :key="index"
					:style="{left:box.left+'px',top:box.top+'px','background-color':index==indexSelect?colorAwardSelect:colorAwardDefault}">
					<image class="pond-name-img" :src="box.image" alt="">
						<view class="pond-name">{{box.name}}</view>
				</view>
			</view>
			<view class="start-btn" @tap="startBtn">
				<image :src="require('./image/pond-button.png')" style="height:80px;width:100%;" alt="">
					<image :src="require('./image/pond-cj.png')" :style="{'top':btntop+'px'}"
						style="position:absolute;left:5px;height:68px;width:89px;top:0;" alt="">
			</view>
			<view class="circle" v-for="(item,index) in circleList" :key="index"
				:style="{'top':item.topCircle+'px','left':item.leftCircle+'px','background-color':index%2==0?colorCircleFirst:colorCircleSecond}">
			</view>
		</view>
		<view class="prize" v-if="prize==1">
			<view class="prize-box">
				<image class="prize-img" :src="require('./image/pond-success.png')" alt="">
					<view class="prize-msg">
						<view>恭喜</view>
						<view>抽中{{prize_name}}</view>
						<view class="continue" @tap="conTinue">继续抽奖</view>
					</view>
			</view>
		</view>
		<view class="prize" v-if="prize==2">
			<view class="prize-box">
				<image class="prize-img2" :src="require('./image/pond-empty.png')" alt="">
					<view class="prize-msg">
						<view>谢谢参与</view>
						<view>再换个姿势抽奖</view>
						<view class="continue" @tap="conTinue">继续抽奖</view>
					</view>

			</view>
		</view>
		<view class="men" v-if="men"></view>
		<view>
			<button @tap="toLog">查看日志</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import user from '@/api/user';
	export default {
		data() {
			return {
				list: [],
				form: {
					prize_name: '',
					prize_id: 0,
					prize_type: 0,
				},
				circleList: [],
				colorCircleFirst: "#F12416",
				colorCircleSecond: "#FFFFFF",
				colorAwardDefault: "#F5F0FC",
				colorAwardSelect: "#ffe400",
				btntop: 0, //按钮的样式
				time: '', //定时器
				indexSelect: 0, //奖品下标
				lottert: 0, //中奖下标
				prize: 0, //是否中奖
				prize_name: '', //奖品名字
				men: false
			}
		},
		created() {
			this.init();
		},
		computed: {
			...mapState(['userInfo', 'hasLogin']),
		},
		methods: {
			toLog(){
				uni.navigateTo({
					url:'/pages/lucky/log'
				})
			},
			init() {
				this.getuserPrize().then(() => {
					var ts = this;
					var left = 9;
					var top = 9;

					for (var i = 0; i < 8; i++) {
						if (i == 0) {
							left = 9;
							top = 9;
						} else if (i < 3 && i != 0) {
							left += 98 + 4; // 更新 left
						} else if (i >= 3 && i < 5) {
							top += 79 + 4; // 更新 top
						} else if (i >= 5 && i < 7) {
							left -= 98 + 4; // 更新 left
						} else if (i >= 7 && i < 8) {
							top -= 79 + 4; // 更新 top
						}

						// 确保 top 和 left 被正确赋值
						if (!ts.list[i].top) {
							ts.$set(ts.list[i], 'top', top);
						} else {
							ts.list[i].top = top;
						}
						if (!ts.list[i].left) {
							ts.$set(ts.list[i], 'left', left);
						} else {
							ts.list[i].left = left;
						}
					}

					this.list = [...this.list]; // 触发更新
				});
			},
			getuserPrize() {
				return user.getuserPrize({}).then(res => {
					if (res.code == 1) {
						this.list = res.data.map(item => ({
							...item,
							top: 0,
							left: 0
						}));
						console.log(this.list);
					} else {
						console.log(res);
					}
				});
			},
			startBtn(e) {
				clearInterval(this.time);
				this.men = true;
				this.btntop = 0;
				this.lottert = 0;
				var ts = this;
				var i = this.indexSelect;
				var list = this.list; // 确保 list 已经被正确赋值
				var time = null;
				var s = 0;

				time = setInterval(function() {
					i++;
					i %= 8;
					s += 30;
					ts.indexSelect = i;
					// 确保 list[i] 存在
					if (list[i]) {
						if (ts.lottert > 0 && i + 1 == ts.lottert) {
							clearInterval(time);
							ts.time = setInterval(function() {
								ts.btntop = ts.btntop == 0 ? -3 : 0;
							}, 900);
							// 检查 list[i].type 是否存在
							if (list[i].type == 2) {
								ts.prize = 2;
							} else {
								ts.prize_name = list[i].name;
								ts.prize = 1;

								// 确保 form 已经定义
								if (ts.form) {
									console.log(list[i])
									ts.form.prize_name = list[i].name;
									ts.form.prize_id = list[i].id;
									ts.form.prize_type = list[i].type;
									// 回传
									ts.setuserPrize();
								}
							}
						}
					} else {
						console.warn(`list[${i}] is undefined`); // 记录未定义的情况
					}
				}, 200 + s);

				setTimeout(function() {
					ts.lottert = ts.randomNum(1, 8);
				}, 2000);
			},

			setuserPrize() {
				user.setuserPrize(this.form).then(res => {
					if (res.code == 1) {
						// this.applyList = res.data.list;
						this.list = res.data;

						console.log(res);
					} else {
						console.log(res);
					}

				});
			},
			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			},
			conTinue() {
				this.men = false;
				this.prize = 0;
				this.init()
			}
		}
	}
</script>

<style scoped>
	.pagebox {
		width: 100%;
		height: 100vh;
		background: #f12416;
	}

	.pond-head image {
		width: 100%;
		height: 430rpx;
	}

	.container-out {
		height: 283px;
		width: 340px;
		background-color: #F47915;
		margin: 16px auto 15px auto;
		border-radius: 8px;
		position: relative;
	}

	.circle {
		position: absolute;
		display: block;
		border-radius: 50%;
		height: 7px;
		width: 7px;
	}

	.content-out {
		position: absolute;
		height: 72px;
		width: 98px;
		background-color: #f5f0fc;
		border-radius: 8px;
		box-shadow: 0 8px 0 #FFCEC0;
	}

	.container-in {
		width: 320px;
		height: 263px;
		background-color: #f12416;
		border-radius: 10px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.pond-name-img {
		position: absolute;
		top: 6px;
		left: 0;
		width: 100%;
		height: 46px;
		z-index: 1;
	}

	.pond-name {
		position: absolute;
		top: 75%;
		color: #c62015;
		width: 98px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		font-size: 9pt;
		text-align: center;
	}

	.start-btn {
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 8px;
		height: 79px;
		width: 98px;
		color: #f6251e;
		text-align: center;
		font-weight: bolder;
		line-height: 77px;
	}

	.prize {
		background: rgba(0, 0, 0, 0.25);
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
		z-index: 100;
	}

	.prize-box {
		margin: 0 auto;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.prize-img {
		width: 100vw;
		max-height: 231px;
		max-width: 375px;
	}

	.prize-img2 {
		width: 100vw;
		max-height: 120px;
		max-width: 375px;
	}

	.prize-msg {
		width: 78.5vw;
		max-width: 294.5px;
		text-align: center;
		background: #ffffff;
		padding-bottom: 6px;
		font-size: 13pt;
	}

	.prize_name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.continue {
		width: 240px;
		height: 40px;
		margin: 28px auto;
		background: #ff5c5c;
		line-height: 40px;
		color: #ffffff;
		border-radius: 20px;
	}

	.men {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		left: 0;
		top: 0;
	}
</style>